<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加文章</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        .title{
            width: 300px;
        }
    </style>
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>
            <button data-target="" class="layui-btn layui-btn-sm"><a href="./Article.html">返回</a></button>
            添加文章
        </legend>
    </fieldset>

    <form class="layui-form" lay-filter="ArticleEdit" action="" onsubmit="return false">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">文章标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" placeholder="文章标题" lay-verify="required" autocomplete="off" class="layui-input"
                        class="title">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">发布日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="publishDate" placeholder="发布日期" lay-verify="required" autocomplete="off"
                        class="layui-input" class="publishDate" id="publishDate">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">文章描述</label>
                <div class="layui-input-block">
                    <input type="text" name="description" placeholder="文章描述" lay-verify="required" autocomplete="off"
                        class="layui-input" class="description" id="description">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">文章内容</label>
                <div class="layui-input-block">
                    <div id="editor"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="article-add">添加文章</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>


    <script src="../js/lodash.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../editor/wangEditor.min.js"></script>
    <script src="../js/common.js"></script>
    <script>
        layui.use(['form', "laydate", 'layer'], async function () {
            var E = window.wangEditor;
            var editor = new E('#editor');
            editor.customConfig.uploadImgServer = '/articleUpload'; //上传图片到服务器
            editor.customConfig.uploadFileName = 'thumb';
            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            editor.customConfig.uploadImgHooks = {
                customInsert: function (insertImg, result, editor) {
                    const url = result.data[0];
                    insertImg(url);
                }
            }
            editor.create(); //创建富文本框

            const form = layui.form;
            form.on("submit(article-add)", async function (data) {
                var html = editor.txt.html(); // 获取 JSON 格式的内容
                const articleone = {
                    title: data.field.title,
                    publishDate: data.field.publishDate,
                    description: data.field.description,
                    content: html
                }
                await $.post("/api/Article", articleone);
                layer.msg('添加成功', {
                    icon: 1,
                    time: 1000
                }, function () {
                    location.href = "Article.html";
                });
            });
            
            
            //点击文本框弹出时间格式
            const laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#publishDate', //指定元素
                type: 'datetime',
                // format: 'yyyy年MM月dd日', //可任意组合
                trigger: 'click', //采用click弹出
            });

        })
    </script>
</body>

</html>